<template>
  <div class="big">
    <div class="box">
      <i class="el-icon-collection-tag"></i>
      <p>我的收藏</p>
    </div>
    <div class="empty" v-if="this.collectList == []">
      <div class="mg"></div>
      <div class="text">
        <h2>您的收藏还是空的！</h2>
        <p>快去购物吧！</p>
      </div>
    </div>
    <div class="full">

 <!-- <li>
          <router-link to="/indent" @click.native="collect">我的订单</router-link>
        </li>
 -->
      <ul>
        <li
          v-for="(item, index) in collectList"
          :key="index"
          @click="$router.push(`/details?id=${item.product_id}`)"
        >
          
            <span class="cha" @click.stop="remove(item.product_id)">×</span>
            <img
              :src="'http://106.15.179.105:3000/' + item.product_picture"
              alt=""
            />
            <h2>{{ item.product_name }}</h2>
            <span class="span">{{ item.product_title }} </span>
            <p>
              <span>{{ item.product_selling_price }}元</span>
              <del v-if="item.product_selling_price != item.product_price"
                >{{ item.product_price }}元</del
              >
            </p>
          
        </li>
      </ul>
      <!--  <mList :shopList="collectList" v-if="!More"></mList> -->
    </div>
  </div>
</template>

<script>
import collect from "../API/collect";
export default {
  name: "",
  data() {
    return {
      collectList: [],
    };
  },
  props: [], //接收父组件传过来的值
  components: {},
  mounted() {},
  created() {
     this.getCollect();
  },
  activated() {
   

  },
  methods: {
    //获取收藏列表
    async getCollect() {
      const { data: res } = await collect.getCollect({
        user_id: this.$store.state.userName.id,
      });
      console.log(res);

      this.collectList = res.collectList;
    },
    //删除收藏中的商品
    async remove(id) {
      // product_id
      console.log(id);
      const { data: res } = await collect.getRemove({
        user_id: this.$store.state.userName.id,
        product_id: id,
      }); 
      console.log(res) 
      if(res.code =='001'){
         this.$notify({
            title: "成功",
            message: res.msg,
            type: "success",
          });
            this.getCollect();
      }
    },
  },
  // beforeRouteEnter(to, from, next) {
  //   next(vm => {
  //     //判断token值是否存在
  //     if (vm.$store.state.userName == "") {
  //      /*  vm.$router.push("/zhyadm/login"); */
  //         /* this.loginShow = true; */
  //       /*  vm.$refs.dialo.showDialog();  */
  //         vm.$refs.dialo.loginDialog();
  //     } else{
  //       next(false)
  //     }
  //   });
  // },

  computed: {},
  watch: {},
};
</script>

<style lang='scss'scoped>
.big {
  width: 100%;
  a{
    text-decoration: none;
  }
  .box {
    margin: 0 auto;
    /*  background: red; */
    height: 64px;
    margin-top: 20px;
    border-bottom: 3px solid rgb(255, 103, 0);
    font-size: 28px;
    display: flex;
    line-height: 64px;

    i {
      line-height: 64px;
      color: rgb(255, 103, 0);
      margin-left: 198.5px;
    }
  }
  .empty {
    width: 100%;
    height: 535px;
    display: flex;
    background: #f5f5f5;
    margin: 0 auto;
    .mg {

      width: 399px;
      height: 400px;
      margin-top: 10px;
      background: url("../../public/imgs/cart-empty.png") no-repeat 100% 100%;
    }
    .text {
      color: #b0b0b0;
      h2 {
        font-size: 36px;
        margin: 170px 120px 15px;
      }
      p {
        font-size: 20px;
        margin-left: 120px;
      }
    }
  }
}
.full {
  background: #eeee;
}
ul {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  text-align: center;
  align-items: center;
  padding-top: 15px;
  li {
    width: 234px;
    height: 300px;
    background: white;
    margin: 0px 0px 20px 13.7px;
    list-style: none;
    padding: 20px 0;
    display: block;
    position: relative;
    img {
      width: 160px;
      height: 160px;
    }

    h2 {
      margin: 25px 10px 0;
      font-size: 14px;
      color: #333;
      font-weight: 400;
      text-align: center;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
    .span {
      display: block;
      height: 18px;
      font-size: 12px;
      color: #b0b0b0;
      margin: 5px 10px;
    }
    p {
      span {
        text-align: center;
        color: #ff6700;
        font-size: 16px;
      }
      del {
        margin-left: 8px;
        color: #b0b0b0;
      }
    }
    .cha {
      position: absolute;
      top: 5px;
      right: 5px;
      display: none;
      font-size: 25px;
    }
  }
  li:hover {
    transform: translateY(-5px);
    transition: 0.2s all;
    box-shadow: 1px 1px 20px 3px rgb(216, 211, 211);
    .cha {
      display: block;
      width: 20px;
      height: 20px;
      cursor: pointer;
    }
  }
}
</style>